<template>
  <div>
    <div>
      <div style="font-size: 18px; font-weight: bold">请退货并填写物流信息</div>
      <div style="font-size: 14px; color: #999">还剩{{ countdown }}</div>
      <el-divider></el-divider>
      <div style="display: flex">
        <img
          src="@/assets/image/icon-receive.png"
          alt=""
          style="width: 24px; height: 24px; margin-right: 10px"
        />
        <div style="font-size: 18px; font-weight: bold">退货地址</div>
      </div>
      <el-descriptions title="用户信息">
        <el-descriptions-item label="收货人">{{
          businessAddress.storeName
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          businessAddress.storePhone
        }}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{
          businessAddress.storeAddressDetail
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      :disabled="refundInfo && refundInfo.status == 2"
      ref="ruleForm"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="物流单号" prop="logisticsNumber">
        <el-input
          v-model="ruleForm.logisticsNumber"
          placeholder="请输入物流单号"
        ></el-input>
      </el-form-item>
      <el-form-item label="物流公司" prop="logisticsCompany">
        <el-select
          v-model="ruleForm.logisticsCompany"
          placeholder="请选择物流公司"
        >
          <el-option
            v-for="i of expressCompanyList"
            :key="i.id"
            :label="i.expressName"
            :value="i.expressName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="退货说明" prop="logisticsIllustrate">
        <el-input
          type="textarea"
          :autosize="{ minRows: 6 }"
          v-model="ruleForm.logisticsIllustrate"
          placeholder="退货说明"
        ></el-input>
      </el-form-item>
      <el-form-item label="上传图片" prop="logisticsPics">
        <el-upload
          class="avatar-uploader"
          :action="imgPath + '/common/upload/file'"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          :limit="3"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="    " v-if="refundInfo && refundInfo.status != 2">
        <el-button type="danger" @click="submitForm('ruleForm')" round
          >立即提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchExpressCompanyList } from "@/api/OrderManagement";
import imgPath from "@/utils/config";

export default {
  props: {
    refundInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    countdown: {
      type: String,
      default: "",
    },
    businessAddress: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      imgPath: imgPath.imgPath,
      ruleForm: {
        logisticsNumber: "",
        logisticsCompany: "",
        logisticsIllustrate: "",
        logisticsPics: [],
      },
      rules: {
        logisticsNumber: [
          { required: true, message: "请输入物流编号", trigger: "blur" },
        ],
        logisticsCompany: [
          {
            required: true,
            message: "请选择物流公司",
            trigger: "change",
          },
        ],
      },
      expressCompanyList: [],
    };
  },
  created() {
    fetchExpressCompanyList().then((res) => {
      this.expressCompanyList = res?.data || [];
    });
  },
  mounted() {
    this.ruleForm = {
      logisticsNumber: this.refundInfo.logisticsNumber || "",
      logisticsCompany: this.refundInfo.logisticsCompany || "",
      logisticsIllustrate: this.refundInfo.logisticsIllustrate || "",
    };
    if (this.refundInfo.logisticsPics !== '' && this.refundInfo.logisticsPics !== null)
      this.ruleForm.logisticsPics = this.refundInfo.logisticsPics.split(",");
    else this.ruleForm.logisticsPics = [];
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            ...this.ruleForm,
            logisticsPics: this.ruleForm.logisticsPics.join(","),
            ...this.businessAddress,
          };
          this.$emit("submit", params);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSuccess(data) {
      this.ruleForm.logisticsPics.push(data.data);
    },
    handleRemove(file, fileList) {
      this.ruleForm.logisticsPics = this.ruleForm.logisticsPics.filter(
        (item) => item !== file.response.data
      );
    },
  },
};
</script>

<style lang="scss">
.el-input__inner,
.el-textarea__inner {
  border: none;
  background-color: #f5f7f9;
}
.avatar-uploader .el-upload {
  background-color: #f5f7f9;
  border: 1px dashed #e8e8e8;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-upload--picture-card,
.el-upload-list--picture-card .el-upload-list__item {
  width: 110px;
  height: 110px;
}
.avatar-uploader-icon {
  width: 110px;
  height: 110px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar {
  width: 110px;
  height: 110px;
  display: block;
}
</style>
